<!--
 * @Author: suJiuFu 15070021572@jq.com
 * @Date: 2022-10-08 15:34:26
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-11-08 00:01:31
 * @FilePath: \pc-cashier\public\order.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>菜品分类报表</title>
    <style>
      @page {
        margin: 0;
      }
      /**打印样式增加内边距*/
      @media print {
        .more-bill-card {
          width: 72.1mm;
          display: flex;
          flex-direction: column;
          box-sizing: border-box;
          margin: 0;
          padding: 2mm;
          box-sizing: border-box;
        }
      }
      .more-bill-card .title {
        font-size: 20px;
        font-family: PingFang SC, PingFang SC-Bold;
        text-align: center;
        color: #000000;
      }
      .more-bill-card .description {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Bold;
        text-align: center;
        color: #000;
        margin: 4px 0;
      }
      .more-bill-card .address-box {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        font-size: 11px;
        font-family: PingFang SC, PingFang SC-Regular;
        text-align: center;
        color: #000000;
        line-height: 24px;
        margin-top: 80px;
      }
      .handover-card-box {
        background: #ffffff;
        box-sizing: border-box;
        overflow-y: scroll;
        margin: 4px 0;
      }
      .flex-row {
        display: flex;
        flex-direction: row;
      }

      .flex-col {
        display: flex;
        flex-direction: column;
      }

      .justify-start {
        justify-content: flex-start;
      }

      .justify-center {
        justify-content: center;
      }

      .justify-end {
        justify-content: flex-end;
      }

      .justify-evenly {
        justify-content: space-evenly;
      }

      .justify-around {
        justify-content: space-around;
      }

      .justify-between {
        justify-content: space-between;
      }

      .items-start {
        align-items: flex-start;
      }

      .items-center {
        align-items: center;
      }

      .items-end {
        align-items: flex-end;
      }
      .text_15 {
        align-self: center;
        color: #353535;
      }
      .text_70 {
        margin-top: 7px;
        align-self: center;
      }
      .font_5 {
        font-size: 18px;
        font-family: PingFang SC Regular;
        color: #000;
      }
      .font_2 {
        font-size: 14px;
        font-family: PingFang SC Regular;
        color: #000;
      }
      .space-x-line {
        margin-top: 4px;
        width: 100%;
        background: #000;
        height: 1px;
      }
      .font_6 {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Bold;
      }
      .font_8 {
        font-size: 11px;
        font-family: PingFang SC, PingFang SC-Bold;
        color: #000;
      }
      .font_9 {
        font-size: 10px;
        font-family: PingFang SC, PingFang SC-Bold;
        color: #000;
      }
      .group_17 {
        margin-top: 20px;
      }
      .group_18 {
        margin-top: 2px;
      }
      .mb-10{
        margin-bottom: 10px;
      }
      .group_49 {
        margin-top: 10px;
        padding-top: 20px;
        border-top: solid 1px #e2e2e2;
      }
      .group_59 {
        margin-top: 10px;
        padding: 10px 0;
        border-top: solid 1px #e2e2e2;
        border-bottom: solid 1px #e2e2e2;
      }
      .group_60 {
        margin-top: 10px;
        padding-bottom: 10px;
        border-bottom: solid 1px #e2e2e2;
      }
      .group_62 {
        margin-top: 5px;
      }
      .group_65 {
        margin-top: 8px;
      }
      .group_30 {
        margin-top: 30px;
      }
      .group_64 {
        margin-top: 10px;
        padding: 10px 0;
        border-top: solid 1px #e2e2e2;
        border-bottom: solid 1px #e2e2e2;
      }
      .text_101 {
        margin-top: 12px;
        align-self: center;
      }
      .text_106 {
        margin-top: 20px;
        align-self: center;
      }
      .text-wrapper_16 {
        align-self: center;
        padding-top: 10px;
        margin-top: 10px;
        width: 100%;
        border-top: solid 1px #e2e2e2;
      }
      .dgrid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        text-align: center;
      }
      .dgrid > span:last-child {
        text-align: right;
      }

      .dgrid > span:first-child {
        text-align: left;
      }
        .dgrid3 {
            grid-template-columns: repeat(3, 1fr);
        }
        .dgrid2 {
            grid-template-columns: repeat(2, 1fr);
        }
      .dgrid4 {
        grid-template-columns: 100px 1fr 1fr 1fr;
      }
    </style>
  </head>

  <body>
    <div id="order">
      <div class="more-bill-card">
        <div class="flex-col" style="width: 100%">
            <h1 class="title">
                {{fetchObjectDeepAttrValue(workLogTicketDetailData, 'detail.shopName', '')}}
            </h1>
          <div class="description">【菜品分类报表】</div>

          <div class="flex-col">
            <div class="flex-row justify-between items-center group_17">
              <div class="font_8">营业时间：{{fetchObjectDeepAttrValue(workLogTicketDetailData, 'detail.time_block', '')}}</div>
            </div>

          </div>
          <div class="flex-col" v-for="(v, index) in list" :key="index">
            <div class="flex-row justify-between items-center group_65">
              <div class="font_8">桌台区域：{{v.name}}</div>
            </div>
            <template v-for="(item, i) in v.list" :key="i">
              <span class="font_6 text_70">{{item.name}}</span>
              <div class="dgrid4 dgrid group_65">
                <span class="font_8">菜品名称</span>
                <span class="font_8">数量</span>
                <span class="font_8">单价</span>
                <span class="font_8">总金额</span>
              </div>
              <div class="space-x-line"></div>
              <div class="dgrid4 dgrid group_62" v-for="(data, index) in item.list" :key="index">
                <span class="font_8">{{ data.name }}</span>
                <span class="font_8">{{ data.num }}</span>
                <span class="font_8">&yen;{{ data.money }}</span>
                <span class="font_8">&yen;{{ data.total_money }}</span>
              </div>
              <div class="dgrid4 dgrid group_62 mb-10">
                  <span class="font_8">{{ item.name }}合计：</span>
                  <span class="font_8">{{totalCount(item.list)}}</span>
                  <span class="font_8"></span>
                  <span class="font_8">&yen;{{ totalMoney(item.list) }}</span>
                </div>

          </template>
          </div>

        <div class="dgrid2 dgrid group_62">
            <span class="font_8">合计</span>
            <span class="font_8">&yen;{{ totalDishesMoney(list) }}</span>
        </div>
        <div class="address-box">
            <span>   {{fetchObjectDeepAttrValue(workLogTicketDetailData, 'detail.shopInfo.address', '')}}</span>
            <span>订座电话：{{fetchObjectDeepAttrValue(workLogTicketDetailData, 'detail.shopInfo.phone', '')}}</span>
            <span>技术支持：贵州一粒米科技有限公司</span>
            
          </div>
      </div>
    <script src="./js/vue.min.js"></script>
    <script>
      var vm = new Vue({
        el: '#order',
        data: {
          workLogTicketDetailData: {
          detail: {
            shopInfo: {
              address: '测试地址',
              phone: '123456789'
            },
            list: [
              {
                name: '区域1',
                list: [
                  {
                    name: '菜品1',
                    list: [
                      { name: '菜品A', num: 2, money: 10, total_money: 20 },
                      { name: '菜品B', num: 1, money: 15, total_money: 15 }
                    ]
                  },
                  {
                    name: '菜品2',
                    list: [
                      { name: '菜品C', num: 3, money: 8, total_money: 24 },
                      { name: '菜品D', num: 1, money: 12, total_money: 12 }
                    ]
                  }
                ]
              },
              {
                name: '区域2',
                list: [
                  {
                    name: '菜品3',
                    list: [
                      { name: '菜品E', num: 1, money: 20, total_money: 20 },
                      { name: '菜品F', num: 2, money: 18, total_money: 36 }
                    ]
                  }
                ]
              }
            ]
          }
          }
        },
        mounted() {
          const { ipcRenderer } = require('electron')
          ipcRenderer.on('print-info', (event, printerName, mess, printerPage) => {
            this.workLogTicketDetailData = mess
            console.log(this.workLogTicketDetailData)
            // 获取内容高度并发送打印请求
            this.$nextTick(() => {
              const height = document.getElementById('order').offsetHeight
              ipcRenderer.send('printStart', printerName, height)
            })
          })
        },
        computed: {
            // 菜品分类数量合计
    totalCount() {
      return function (arr) {
        let count = 0
        arr.map(v => (count += Number(v.num)))
        return count
      }
    },
    // 菜品分类总金额合计
    totalMoney() {
      return function (arr) {
        let count = 0
        arr.map(v => (count += v.total_money))
        return count
      }
    },
           // 所有菜品金额总计
    totalDishesMoney() {
      return function (arr) {
        let count = 0
        if (!arr) return count
        arr.map(v => {
          console.log(v)
          Object.keys(v.list).map(k => {
            v.list[k].list.map(res => {
              count += res.total_money
            })
          })
          return v
        })
        return count.toFixed(2)
      }
    },
           list() {
            return this.fetchObjectDeepAttrValue(
              this.workLogTicketDetailData,
              'detail.list',
              []
            )
          }
        },
        methods: {
          fetchObjectDeepAttrValue(parent, attrStr, defaultValue = false) {
            // 通过try-catch来捕捉访问对象失败情况--这是解决嵌套对象重要一步，这样就可以大胆访问对象--这也是封装原因
            // 不封装情况1.访问对象出错，try-catch捕捉到，在catch进行访问对象错误处理
            // 不封装情况2.如果在情况1下，又有多个属性需要进行这样处理，就会需要写多个catch处理，代码可观性上就比封装的差
            let resultValue
            try {
              const attrArray = attrStr.split('.')
              const currObj = attrStr ? parent[attrArray[0]] : parent // 不输入查找属性，默认返回整个对象
              resultValue =
                attrArray.length <= 1
                  ? currObj
                  : this.fetchObjectDeepAttrValue(currObj, attrArray.slice(1).join('.')) // 迭代访问对象
            } catch (e) {
              resultValue = undefined
            }
            if (resultValue) {
              return resultValue
            } else {
              return defaultValue
            }
            // fetchObjectDeepAttrValue应该在js逻辑层处理，HTML模板层只需渲染即可
            // 举个例子,这里的默认初始值是空字符串
            // this.address=fetchObjectDeepAttrValue(res, 'data.detail.detail.shopInfo.address','')
            // 注意事项：不要在HTML模板层写太多的判断，多了代码难以维护哦，或者写在computed和methods
          }
        }
      })
    </script>
  </body>
</html>
